<template>
	<view class="search">
		<u-navbar  :title="title">
			<view slot="right" class="slot-wrap" v-if="type == 1">
				<text class="iconfont" @tap="getIndex">&#xe609;</text>
			</view>
			<view slot="right" class="slot-wrap" v-else>
				<text class="record" @tap="testRecord">考试记录</text>
			</view>
		</u-navbar>
		<view class="empty" v-if="listData.length == 0">
			<view class="img">
				<image src="/static/home/empty.png"></image>
			</view>
			<view class="noChange">您目前还没有可选择的题库</view>
			<view class="button" @tap="getStudy">前往题库中心</view>
		</view>
		<view class="list" v-else>
			<view class="listX" v-for="(v, k) in listData" :key="k" @tap="changeChapter(v.id,v.subject_type,v.title, v.status,v.has_record_chapter)">
				<view class="listX_left">
					<u-lazy-load class="lazy_load" :image="v.image + '-84_84'" :loading-img="loadingImg" ></u-lazy-load>
				</view>
				<view class="listX_right">
					<view class="title row2">{{v.title}}</view>
				</view>
				<view class="listX_right2">
					<text class="iconfont">&#xe600;</text>
				</view>
			</view>
		</view>
		<view style="padding: 14rpx 0;">
			<u-loadmore v-if="last_page > 1" :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				value: '',
				loadingImg: '',
				image: '',
				type: '',
				listData: [],
				random: '',
				refresh: true,
				page: 1,
				last_page: 1,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				}
			}
		},
		onLoad(option) {
			this.type = option.type
			this.random = option.random
		},
		onShow() {
			uni.showLoading({
				title: '加载中'
			})
			if (this.type == 1) {
				this.title = '选择题库'
			} else {
				this.title = '模拟考试'
			}
			this.questionListInfo()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.refresh = true
			this.questionListInfo()
		},
		// 上拉加载
		onReachBottom() {
			if(this.page >= this.last_page) return ;
			this.status = 'loading';
			this.page ++;
			this.refresh = false
			setTimeout(() => {
				
				if(this.page >= this.last_page) this.status = 'nomore';
				else this.status = 'loading';
				this.questionListInfo()
			},500)
		},
		methods: {
			// 选择章节
			changeChapter(id, subject_type, title, status, has_record_chapter) {
				if (status == 1) {
					this.$message.info('该题库已过期，请重新购买')
				} else {
					// 顺序练习
					if (this.type == 1) {
						uni.navigateTo({
							url: '/pages/home/home/selectChapter?course_id=' + id + '&random=' + this.random
						})
					} else {
						// 英语考试选择章节
						if (subject_type == 1) {
							uni.navigateTo({
								url: '/pages/home/home/englishSelectChapter?course_id=' + id + '&title=' + title + '&subject_type=' + subject_type + '&has_record_chapter=' + has_record_chapter
							})
						} else {
							// 模拟考试
							uni.navigateTo({
								url: '/pages/home/home/examinationInformation?course_id=' + id
							})
						}
						
					}
				}
			},
			// 考试记录
			testRecord() {
				uni.navigateTo({
					url: '/pages/my/testRecord/testRecord'
				})
			},
			// 首页
			getIndex() {
				uni.switchTab({
					url: '/pages/home/home/home'
				})
			},
			// 前往题库中心
			getStudy() {
				uni.switchTab({
					url: '/pages/study/study'
				})
			},
			questionListInfo() {
				this.$api.post(global.apiUrls.getQuestionList, {
					page: this.page
				}).then(res => {
					uni.hideLoading()
					uni.stopPullDownRefresh()
					console.log(res)
					if (res.data.code == 1) {
						this.last_page = res.data.data.last_page
						if (this.refresh) {
							this.listData = res.data.data.data
						} else {
							this.listData = this.listData.concat(res.data.data.data)
						}
						
					} else {
						this.$message.info(res.data.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// page {
	// 	background: #FFFFFF;
	// 	height: 100%;
	// 	color: #333333;
	// }
	.search {
		// padding: 24upx 32upx;
		.slot-wrap {
			.iconfont {
				display: inline-block;
				font-size: 36rpx;
				margin-right: 32rpx;
				transform: translateY(-5rpx);
			}
			.record {
				display: inline-block;
				transform: translateY(-2rpx);
				margin-right: 32rpx;
				font-size: 30rpx;
				color: #267DFF;
			}
		}
		.empty {
			.img {
				width: 400rpx;
				height: 272rpx;
				margin: 185rpx auto 55rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.noChange {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 48rpx;
				color: #999999;
				text-align: center;
			}
			.button {
				width: 360rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #267DFF;
				opacity: 1;
				border-radius: 100rpx;
				margin: 51rpx auto 0;
				color: #FFFFFF;
				font-size: 32rpx;
			}
		}
		.list {
			padding: 0 32rpx;
			.listX {
				padding:  32rpx 0;
				display: flex;
				border-bottom: 1rpx solid #EEEEEE;
				.listX_left {
					width: 120rpx;
					height: 120rpx;
					border-radius: 16rpx;
					// background: skyblue;
					margin-right: 24rpx;
					// /deep/.u-lazy-item {
					// 	width: 100%;
					// 	height: 100% !important;
					// }
					.lazy_load {
						height: 120rpx;
						width: 120rpx;
						border-radius: 8upx !important;
					}
					image {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}
				}
				.listX_right {
					flex: 7;
					.title {
						// height: 90rpx;
						padding-top: 15rpx;
						font-weight: bold;
						margin-bottom: 33rpx;
						line-height: 45rpx;
						font-size: 32rpx;
					}
					.title2 {
						color: #BFBFBF;
					}
				}
				.listX_right2 {
					flex: 1;
					text-align: right;
					padding-top: 42rpx;
					.iconfont {
						font-size: 22rpx;
					}
				}
			}
		}
	}
</style>
